<template>
	<view class="box" @click=changeNowFieldArea(1)>
		<view class="item" :class="nowAreaId == item.value && 'active'" v-for="item in fieldAreaList" :key="item.value"
			@click.stop="changeNowFieldArea(item)">
			{{item.label}}
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, watchEffect } from 'vue';
	const emits = defineEmits(['changeArea'])
	const props = defineProps({
		nowFieldAreaId: {
			type: String,
			required: true
		},
		fieldAreaList: {
			type: Array,
			required: true
		}
	})


	// 当前选中的区域id
	const nowAreaId = ref(props.nowFieldAreaId)
	watchEffect(() => {
		nowAreaId.value = props.nowFieldAreaId
	})
	// 改变当前选中区域
	const changeNowFieldArea = (item) => {
		if (item === 1) {
			emits('changeArea')
		} else {

			nowAreaId.value = item.value
			emits('changeArea', item.value)
		}
	}
</script>

<style scoped lang="scss">
	.box {
		position: absolute;
		top: 180rpx;
		left: 0;
		width: 750rpx;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;

		.item {
			padding: 20rpx 20rpx;
			border-bottom: 2rpx solid #E0E5EB;
			background-color: #fff;
		}

		.active {
			color: $primary-color;
		}
	}
</style>